<template>
  <view class="report_root">
    <u-tabs
      :list="statusList"
      @change="onTabChange"
      :scrollable="false"
    ></u-tabs>

    <view class="condition_box">
      <view class="msg_item">
        <view class="left">关联计划</view>
        <view class="right arrow_right">
          急性支气管炎
        </view>
      </view>
      <view class="msg_item">
        <view class="left">药品</view>
        <view class="right arrow_right">
          蓝芩口服液
        </view>
      </view>
    </view>

    <image
      class="bg"
      src="/static/home/bg_chart.png"
      mode="aspectFit"
    ></image>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: { show: false },
      statusList: [
        { name: "药品用量" }, { name: "用药间隔" }, { name: "健康记录" }, { name: "用药记录" }
      ],
    };
  },
  methods: {
    onTabChange() {

    },
  },
  mounted() { },
  created() { },
};
</script>

<style
  lang="scss"
  scoped
>
.report_root {
  background: #F8FAFE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 98rpx;
  box-sizing: border-box;
}

.condition_box {
  margin: 24rpx 40rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  padding: 24rpx 40rpx;

  .condition {
    font-size: 34rpx;
    font-weight: 800;
    color: #0D1F4F;
    line-height: 48rpx;
  }
}

.bg {
  width: calc(100vw - 40rpx);
  margin: 0 20rpx;
  flex: 1;
}
</style>